<template>
  <ze-tabs
    v-model="currentTabIndex" :tabs="tabs"
    :exclude-tabbar="true"
    @scrolltolower="handleLoadMore"
    @refresherrefresh="handleRefresh"
  >
    <template #todo>
      <todo-list
        ref="todoList"
        @loadstart="tabs[0].refresherTriggered = true"
        @loadend="tabs[0].refresherTriggered = false"
      />
    </template>

    <template #done>
      <done-list
        ref="doneList"
        @loadstart="tabs[1].refresherTriggered = true"
        @loadend="tabs[1].refresherTriggered = false"
      />
    </template>
  </ze-tabs>
</template>

<script>
import TodoList from './todo-list.vue'
import DoneList from './done-list.vue'
import ZeTabs from '@/components/ze-tabs/index.vue'

export default {
  name: 'TodoIndex',
  components: { ZeTabs, TodoList, DoneList },
  data() {
    return {
      currentTabIndex: 0,
      tabs: [
        { title: '待处理', name: 'todo', refresherEnabled: true, refresherTriggered: false },
        { title: '已处理', name: 'done', refresherEnabled: true, refresherTriggered: false },
      ],
    }
  },
  methods: {
    handleLoadMore(tabIndex) {
      if (tabIndex === 0) {
        this.$refs.todoList.loadMore()
      } else if (tabIndex === 1) {
        this.$refs.doneList.loadMore()
      }
    },
    handleRefresh(tabIndex) {
      if (tabIndex === 0) {
        this.$refs.todoList.refresh()
      } else if (tabIndex === 1) {
        this.$refs.doneList.refresh()
      }
    },
  },
  onShow() {
    this.$refs.todoList.update()
    this.$refs.doneList.update()
  },
}
</script>
